<template>
  <div class="box">

    <div>
      <h1>新建账号</h1>
      <hr>
      <div class="main">
        <div>
          用户名称:
          <el-input class="input2" type="text" v-model="username" placeholder="请输入用户名"></el-input>
        </div>
        <div>
          用户密码:
          <el-input class="input2" type="password" v-model="ruleForm.pass" placeholder="请输入用户名"></el-input>
        </div>
        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
        </el-form>
        <div>
          手机号码:
          <el-input class="input2" type="text" v-model="phone" placeholder="请输入用户名"></el-input>
        </div>
        <div>
          用户邮箱:
          <el-input class="input2" placeholder="请输入邮箱" v-model="email"></el-input>
        </div>
        <div class="radio">
          是否可用：
          <el-radio v-model="radio" label="true">是</el-radio>
          <el-radio v-model="radio" label="">否</el-radio>
        </div>
        <div class="radio1">
          角色配置：
          <el-radio v-model="radio1" label="3">普通管理员</el-radio>
          <el-radio v-model="radio1" label="2">管理员</el-radio>
          <el-radio v-model="radio1" label="1">超级管理员</el-radio>
        </div>
      </div>
    </div>


    <div class="save">
      <el-button type="primary" class="saveBtn" v-show="!this.$route.params.data"
        @click="adminAdd(username, email, ruleForm.pass, phone, radio1, radio)">保存</el-button>
      <el-button type="primary" class="saveBtn" v-show="this.$route.params.data"
        @click="adminUpade(id,username, email, ruleForm.pass, phone)">保存编辑</el-button>
      <el-button type="primary" class="chaXcancelBtnun" @click="cancel">取消</el-button>
    </div>
  </div>
</template>


<script>
export default {
  created() {
    console.log("编辑参数", this.$route.params.data);
    this.editData(this.$route.params.data);
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    return {
      // 账号密码的数据
      username: "",
      email: "",
      password: "",
      phone: "",
      checked: "",
      dynamicValidateForm: "",
      id:null,
      roleId:'',
      ruleForm: {
        pass: "",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
      },

      // 选择框的数据
      radio: "true",
      radio1: "3",
    };
  },
  methods: {
    // 取消
    cancel(){
      this.$router.push('/setting/permissionmgr')
    },
    //编辑
    editData(data) {
      this.email = data.email;
      this.id = data.id;
      this.is_enable = data.is_enable;
      this.last_login_time = data.last_login_time;
      this.phone = data.phone;
      this.username = data.username;
      this.ruleForm.pass = data.password;
      // this.roleId = data.role.roleId
    },
    //新增用户
    adminAdd(username, email, password, phone, roleId, is_enable) {
      // emali,
      // let a = new Date();
      // console.log(username)

      this.$http({
        url: "/admin/add",
        method: "POST",
        data: {
          email: email,
          // id: 0,
          is_enable,
          last_login_time: "",
          phone,
          username,
          password,

          roleId,
          role: {
            roleId: 0,
          },
        },
      })
        .then((res) => {
          console.log("保存chengg", res);
          this.$router.push('/setting/permissionmgr')
        })
        .catch((err) => {
          console.log("保存失败", err);
        });
    },
    //保存编辑
    adminUpade(id,username, email, password, phone) {
      this.$http({
        url: "/admin/update",
        method: "POST",
        data: {
          email: email,
          id:id,
          is_enable: true,
          last_login_time: "",
          phone,
          username: username,
          password,
          roleId: 0,
        },
      })
        .then((res) => {
          console.log("保存编辑chengg", res);
          this.$router.push('/setting/permissionmgr')
        })
        .catch((err) => {
          console.log("保存编辑失败", err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  margin: 0 auto;
  min-width: 1200px;
  height: 1000px;

  h1 {
    font-size: 30px;
  }

  hr {
    margin: 20px 0 20px 0;
    border-top: 2px solid rgba(128, 128, 128, 0.753);
  }

  .main {
    margin: 0 auto;
    width: 1200px;
    text-align: center;

    .radio {
      margin: 20px 0;
       margin-left: -150px;
    }
 .radio1 {
      margin: 20px 0;
       margin-left: 60px;
    }

    .input2 {
      width: 260px;
      margin: 15px 0px 15px 0;
    }
  }


  .save {
    text-align: center;
    padding: 30px 0;

    .saveBtn {
      margin-right: 50px;
      margin-left: 30px;
    }

    .cancelBtn {
      margin-left: 50px;
    }

  }

}
</style>